<template>
  <div class="content">
    <el-card class="box-card card_left">
      <div></div>
      <span>
        <!-- 结构与病害 -->
        <el-select v-model="bridgeType" placeholder="选择桥梁类型" @change="getTree">
          <el-option label="公路桥梁养护规范" value="1"></el-option>
          <el-option label="城市桥梁养护规范" value="0"></el-option>
        </el-select>
      </span>
      <el-tree :data="treedata" :props="defaultProps" default-expand-all @node-click="handleNodeClick" accordion
      node-key="id" ref='tree'
      show-checkbox @check-change="handleCheckChange" :check-on-click-node="true" :check-strictly="true"
      :default-checked-keys="checkedKeys" :default-expanded-keys="expandedKeys">
      </el-tree>

    </el-card>
    <el-card class="box-card card_right">
      <div class="box_one">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-input v-model="name" placeholder="请输入..." size="small"></el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" size="small">查询</el-button>
          </el-col>
          <el-col :span="12">
            <div>
              <el-button type="primary" icon="el-icon-plus" size="small" @click="add">新增</el-button>
            </div>
          </el-col>
        </el-row>
        <div>
          <!--  -->

        </div>
      </div>
      <el-table :data="tableData" :header-cell-style="{background: '#8595B9',color: '#fff',height:'44px'}"
        stripe size="small">
        <el-table-column prop="minorRepairMaintainName" label="小修保养项名称" show-overflow-toolti></el-table-column>
        <el-table-column prop="description" label="简介" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-tooltip content="修改">
              <el-button type="text" icon="el-icon-edit-outline" @click="handleEdit(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除">
              <el-button type="text" icon="el-icon-delete" style="color:red !important"
                @click="handleDelete(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :page-count="pageNum"
          @current-change="changeCurrent"
        ></el-pagination>
      </div>
    </el-card>
    <!-- 新增，编辑弹窗 -->
    <vx-popup :title="title" width="680px" @close="closePopup" :active.sync="FormVisible" @confirmPopup="submitForm"
      @cancelPopup="closePopup">
      <el-form :model="formData" :rules="rules" ref="addRefRuleForm" label-width="150px" class="demo-ruleForm">
        <el-form-item label="小修保养项名称：" prop="minorRepairMaintainName">
          <el-input v-model="formData.minorRepairMaintainName" placeholder="请输入小修保养项名称"></el-input>
        </el-form-item>
        <el-form-item label="小修保养简介：">
          <el-input v-model="formData.description" placeholder="请输入简介 500字以内" type="textarea" :rows="3"
            maxlength="500"></el-input>
        </el-form-item>

      </el-form>
    </vx-popup>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        total:0,
        pageSize:10,
        pageNum:1,
        checkedKeys: [],
        expandedKeys: [],
        title: '',
        FormVisible: false,
        bridgeType: '0',
        total: 0,
        treedata: [],
        formData: {
          minorRepairMaintainName: '',
          typeId: '',
          description: ''
        },
        name: "",
        defaultProps: {
          children: "children",
          label: "name",
        },
        tableData: [],
        rules: {
            minorRepairMaintainName: [{
              required: true,
              message: "请输入名称",
              trigger: "blur"
            },
            {
              min: 3,
              max: 10,
              message: '长度在 3 到 10 个字符',
              trigger: 'blur'
            }
          ],
        },
      };
    },

    created() {
      this.getTree()
    },
    methods: {
      //确定
      submitForm() {
        if (this.title == '新增') {
          this.$api.knowledge.addApi(this.formData).then(res => {
            if (res.data.success) {
              this.$message({
                type: "success",
                message: "添加成功",
              });
              this.getList()
              this.FormVisible = false
            }
          })
        }
        if (this.title == '修改') {
          this.$api.knowledge.upApi(this.formData).then(res => {
            if (res.data.success) {
              this.$message({
                type: "success",
                message: "修改成功",
              });
              this.getList()
              this.FormVisible = false
            }
          })
        }
      },
      //修改
      handleEdit(row) {
        // this.formData = {
        //   minorRepairMaintainName: row.minorRepairMaintainName,
        //   typeId: row.typeId,
        //   description:row.description,
        //   id:row.id
        // }
        this.formData = row
        this.formData.createTime = ''
        this.formData.updateTime = ''
        this.FormVisible = true
        this.title = '修改'
      },
      //删除
      handleDelete(row) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.$api.knowledge.delApi({
              id: row.id
            }).then(res => {
              if (res.data.success) {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                this.getList()
              }
            })
            callback()
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      closePopup() {
        this.FormVisible = false
      },
      add() {
        this.formData = {
          minorRepairMaintainName: '',
          typeId: '',
          description: ''
        }
        if (this.node)
          this.formData.typeId = this.node.id
        else {
          this.$message({
            type: "error",
            message: "请选择桥梁类型",
          });
          return
        }

        this.title = '新增'
        this.FormVisible = true
      },
      //获取结构树
      getTree() {
        this.treedata = []
        this.$api.knowledge.getTree({
          standardId: this.bridgeType
        }).then(res => {
          if (res.data.success)
            res.data.data.forEach(item => {
              item.children = []
            })
          this.treedata = res.data.data
        })
      },
      //   树节点被点击时的回调
      handleNodeClick(data, Node, s) {
        this.checkedKeys = [data.id];
        this.$refs['tree'].setCheckedKeys([data.id]);
        this.tableData = []
        this.node = data
        this.getList()
      },
      handleCheckChange(data, checked, child) {
        if (checked === true) {
          this.checkedKeys = [data.id];
          this.$refs['tree'].setCheckedKeys([data.id]);
          this.tableData = []
          this.node = data
          this.getList()
        }
      },
      changeCurrent(val) {
        this.pageNum = val
        this.getList()
      },
      //获取列表
      getList() {
        this.$api.knowledge.getList({
          typeId: this.node.id
        }).then(res => {
          if (res.data.success)
            this.tableData = res.data.data[0]
        })
      }

    },
  };

</script>

<style lang="scss" scoped>
  .form2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .card_left {
    span {
      .mRight6 {
        margin-right: 6px;
      }

      display: block;
      font-size: 16px;
      font-weight: 500;
      color: #327bdc;
      line-height: 30px;
      margin-bottom: 18px;
    }
  }

  .card_right {
    .el-row {
      margin-bottom: 20px;

      .el-col-12:nth-child(2) {
        text-align: right;
      }

      .el-col-12:nth-child(3) {
        text-align: right;
      }
    }
    /deep/.el-card__body{
      height: 95%;
      position: relative;
    }
    .page {
      margin-top: 20px;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
    }

    .box_two {
      .titletop {
        font-size: 16px;
        color: #327bdc;
        font-weight: 500;
        display: block;
        height: 32px;
        line-height: 32px;
      }

      .tab-wrapper {
        /deep/.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
          padding-left: 20px;
        }

        /deep/.el-tabs--top .el-tabs__item.is-top:nth-child(7) {
          padding-right: 20px;
        }

        /deep/.el-tabs__nav-wrap::after {
          // background-color: none;
          z-index: -1;
        }

        /deep/.el-tabs__item.is-active {
          color: #fff;
          background: rgba(var(--vs-primary), 1) !important;
        }

        /deep/.el-tabs__item {
          height: 30px;
          line-height: 30px;
          margin-right: 20px;
          border-radius: 20px;
          background: #f2f2f2;
        }

        /deep/.el-tabs__item.is-active {
          color: #fff;
        }

        /deep/.el-tabs__active-bar {
          background: none;
        }
      }
    }
  }

  /deep/.el-select {
    width: 160px;
  }

  /deep/.el-input__icon {
    line-height: 30px;
  }

</style>
